<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
            <el-form-item label="标题" prop="title">
                <el-input
                    v-model="queryParams.title"
                    placeholder="请输入标题"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="起拍价" prop="initialPrice">
                <el-input
                    v-model="queryParams.initialPrice"
                    placeholder="请输入起拍价"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="当前价" prop="currentPrice">
                <el-input
                    v-model="queryParams.currentPrice"
                    placeholder="请输入当前价"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="评估价" prop="consultPrice">
                <el-input v-model="queryParams.consultPrice" placeholder="请输入评估价" clearable
                          @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="起拍时间" prop="start">
                <el-date-picker clearable v-model="queryParams.start" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择起拍时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end">
                <el-date-picker clearable v-model="queryParams.end" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="围观次数" prop="viewerCount">
                <el-input
                    v-model="queryParams.viewerCount"
                    placeholder="请输入围观次数"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="延迟次数" prop="delayCount">
                <el-input
                    v-model="queryParams.delayCount"
                    placeholder="请输入延迟次数"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['quartz:tbData:add']"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['quartz:tbData:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['quartz:tbData:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['quartz:tbData:export']"
                >导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="tbDataList" @selection-change="handleSelectionChange" height="680">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="标题" align="left" header-align="center" prop="title" width="300" show-overflow-tooltip />
            <el-table-column label="状态" align="center" prop="status">
                <template v-slot="scope">
                    <el-tag size="small" effect="plain" :type="getStatusLayout(scope.row.status)">
                        {{ getStatusText(scope.row, scope.row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="预览" align="center" prop="picUrl">
                <template #default="{row}">
                    <el-image style="width: 50px; height: 50px" :src="row.picUrl" :preview-src-list="[row.picUrl]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="起拍价" align="center" prop="initialPrice" :formatter="formatPrice"/>
            <el-table-column label="当前价" align="center" prop="currentPrice" :formatter="formatPrice"/>
            <el-table-column label="评估价" align="center" prop="consultPrice" :formatter="formatPrice"/>
            <el-table-column label="市场价" align="center" prop="marketPrice" :formatter="formatPrice"/>
            <el-table-column label="起拍时间" align="center" prop="start">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.start, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center" prop="end">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.end, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="距开始" align="center" prop="timeToStart">
                <template slot-scope="scope" v-if="formatTimeCountdown(scope.row, scope.row.timeToStart)>0">
                    <el-statistic size="small" format="DD天HH时mm分ss秒" :value="formatTimeCountdown(scope.row, scope.row.timeToStart)" time-indices>
                    </el-statistic>
                </template>
            </el-table-column>
            <el-table-column label="距结束" align="center" prop="timeToEnd">
                <template slot-scope="scope">
                    <el-statistic v-if="formatTimeCountdown(scope.row, scope.row.timeToEnd)>0" size="small" format="DD天HH时mm分ss秒" :value="formatTimeCountdown(scope.row, scope.row.timeToEnd)" time-indices>
                    </el-statistic>
                    <el-tag v-else size="small" type="info" effect="plain">已结束</el-tag>
                </template>

            </el-table-column>
            <el-table-column label="围观次数" align="center" prop="viewerCount"/>
            <el-table-column label="延迟次数" align="center" prop="delayCount"/>
            <el-table-column label="商品详情" align="center" prop="itemUrl">
                <template v-slot="scope">
                    <el-link type="primary" :underline="false" :href="'https://'+scope.row.itemUrl" target="_blank">详情</el-link>
                </template>
            </el-table-column>
<!--            <el-table-column label="mnNotice" align="center" prop="mnNotice"/>
            <el-table-column label="credit" align="center" prop="credit"/>
            <el-table-column label="bidCount" align="center" prop="bidCount"/>
            <el-table-column label="applyCount" align="center" prop="applyCount"/>
            <el-table-column label="catNames" align="center" prop="catNames"/>
            <el-table-column label="collateralCatName" align="center" prop="collateralCatName"/>-->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="110" v-if="checkRole(['admin'])">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['quartz:tbData:edit']">
                        修改
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['quartz:tbData:remove']">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改淘宝房源对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="商品地址" prop="itemUrl">
                    <el-input v-model="form.itemUrl" placeholder="请输入商品地址"/>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题"/>
                </el-form-item>
                <el-form-item label="预览图片地址" prop="picUrl">
                    <el-input v-model="form.picUrl" placeholder="请输入预览图片地址"/>
                </el-form-item>
                <el-form-item label="起拍价" prop="initialPrice">
                    <el-input v-model="form.initialPrice" placeholder="请输入起拍价"/>
                </el-form-item>
                <el-form-item label="当前价" prop="currentPrice">
                    <el-input v-model="form.currentPrice" placeholder="请输入当前价"/>
                </el-form-item>
                <el-form-item label="评估价" prop="consultPrice">
                    <el-input v-model="form.consultPrice" placeholder="请输入评估价"/>
                </el-form-item>
                <el-form-item label="市场价" prop="marketPrice">
                    <el-input v-model="form.marketPrice" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="sellOff">
                    <el-input v-model="form.sellOff" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="起拍时间" prop="start">
                    <el-date-picker clearable
                                    v-model="form.start"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择起拍时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="end">
                    <el-date-picker clearable
                                    v-model="form.end"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="timeToStart">
                    <el-input v-model="form.timeToStart" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="timeToEnd">
                    <el-input v-model="form.timeToEnd" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="围观次数" prop="viewerCount">
                    <el-input v-model="form.viewerCount" placeholder="请输入围观次数"/>
                </el-form-item>
                <el-form-item label="" prop="bidCount">
                    <el-input v-model="form.bidCount" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="延迟次数" prop="delayCount">
                    <el-input v-model="form.delayCount" placeholder="请输入延迟次数"/>
                </el-form-item>
                <el-form-item label="" prop="applyCount">
                    <el-input v-model="form.applyCount" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="catNames">
                    <el-input v-model="form.catNames" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="collateralCatName">
                    <el-input v-model="form.collateralCatName" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="xmppVersion">
                    <el-input v-model="form.xmppVersion" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="buyRestrictions">
                    <el-input v-model="form.buyRestrictions" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="supportLoans">
                    <el-input v-model="form.supportLoans" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="supportOrgLoan">
                    <el-input v-model="form.supportOrgLoan" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="bidPriceUnit">
                    <el-input v-model="form.bidPriceUnit" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="" prop="trackParams">
                    <el-input v-model="form.trackParams" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import {listTbData, getTbData, delTbData, addTbData, updateTbData} from "@/api/quartz/tbData"
export default {
    name: "TbData",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 淘宝房源表格数据
            tbDataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                mnNotice: null,
                credit: null,
                itemUrl: null,
                status: null,
                title: null,
                picUrl: null,
                initialPrice: null,
                currentPrice: null,
                consultPrice: null,
                marketPrice: null,
                sellOff: null,
                start: null,
                end: null,
                timeToStart: null,
                timeToEnd: null,
                viewerCount: null,
                bidCount: null,
                delayCount: null,
                applyCount: null,
                catNames: null,
                collateralCatName: null,
                xmppVersion: null,
                buyRestrictions: null,
                supportLoans: null,
                supportOrgLoan: null,
                bidPriceUnit: null,
                trackParams: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        checkPermi,
        checkRole,
        /** 查询淘宝房源列表 */
        getList() {
            this.loading = true
            listTbData(this.queryParams).then(response => {
                this.tbDataList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                mnNotice: null,
                credit: null,
                itemUrl: null,
                status: null,
                title: null,
                picUrl: null,
                initialPrice: null,
                currentPrice: null,
                consultPrice: null,
                marketPrice: null,
                sellOff: null,
                start: null,
                end: null,
                timeToStart: null,
                timeToEnd: null,
                viewerCount: null,
                bidCount: null,
                delayCount: null,
                applyCount: null,
                catNames: null,
                collateralCatName: null,
                xmppVersion: null,
                buyRestrictions: null,
                supportLoans: null,
                supportOrgLoan: null,
                bidPriceUnit: null,
                trackParams: null
            }
            this.resetForm("form")
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm")
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = "添加淘宝房源"
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const id = row.id || this.ids
            getTbData(id).then(response => {
                this.form = response.data
                this.open = true
                this.title = "修改淘宝房源"
            })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateTbData(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功")
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addTbData(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功")
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids
            this.$modal.confirm('是否确认删除淘宝房源编号为"' + ids + '"的数据项？').then(function () {
                return delTbData(ids)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess("删除成功")
            }).catch(() => {
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('quartz/tbData/export', {
                ...this.queryParams
            }, `tbData_${new Date().getTime()}.xlsx`)
        },
        getStatusText(row, val){
            let millSeconds = this.formatTimeCountdown(row, row.timeToEnd)
            if(millSeconds <= 0){
                val = 'end'
                row.status = 'end'
            }
            switch(val){
                case 'doing':
                {
                    val = '正在进行'
                    break;
                }
                case 'todo':
                {
                    val = '即将开始'
                    break;
                }
                case 'end':
                {
                    val = '已结束'
                    break;
                }
                default :
                    val = '未知'
            }
            return val
        },
        getStatusLayout(val){
            switch(val){
                case 'doing':
                {
                    val = 'danger'
                    break;
                }
                case 'todo':
                {
                    val = 'success'
                    break;
                }
                default :
                    val = 'info'
            }
            return val
        },
        formatPrice(row, col, cellValue){
            if(!cellValue) return ""
            return (cellValue / 10000).toFixed(2) + '万'
        },
        formatTimeCountdown(row, cellValue){
            if(cellValue <= 0) return ''
            let endDate = new Date(row.end);
            endDate.setHours(10)
            let today = new Date();
            let diff = endDate - today
            if(diff > 0){
                cellValue = endDate
            }else{
                cellValue = 0
            }
            /*if(diff > 0){
                // 计算剩余天数
                let day = diff / (1000 * 60 * 60 * 24)
                diff %= (1000 * 60 * 60 * 24)
                // 计算小时数
                let hours = diff / (1000 * 60 * 60)
                diff %= (1000 * 60 * 60)
                // 计算分钟数
                let minutes = diff / (1000 * 60)
                diff %= 1000
                // 计算秒数
                let second = diff / 1000
                console.log(`${day}天 ${hours}时 ${minutes}分 ${second}秒`)
            }*/
            return cellValue
        }
    }
}
</script>
<style>
.el-statistic .con .number{
    font-size: 12px !important
}
</style>
